/// 组件 * 搜索栏

<template>
  <Page>
    <ExSearchbar v-bind="searchbar.bind">
      <AInput v-model:value="text" />
      <!-- Dawr -->
      <div>Darwin</div>
      <div v-if="value"> Darwin </div>
      <!-- 搜索栏-姓名 -->
      <ExSearchbarItem name="name" label="姓名">
        <AInput />
      </ExSearchbarItem>
      <ExSearchbarItem name="name" label="姓名">
        <ASelect />
      </ExSearchbarItem>
      <!-- <template #btns>
        <button>Test</button>
        <button>Test</button>
        <button>Test</button>
      </template> -->
    </ExSearchbar>

    <AForm layout="inline">
      <AFormItem>
        <ASelect />
      </AFormItem>
      <AFormItem>
        <ASelect />
      </AFormItem>
    </AForm>
    <br />
    <button @click="toggle"> toggle </button>
    {{ searchbar.getData() }}
  </Page>
</template>

<script setup lang="ts">
type Model = {
  name: string
  age: number
}

const searchbar = useSearchbar<Model>({
  btns: {
    onSearch(model) {
      console.log(model)
    },
    onReset(model) {
      console.log(model)
    },
  },
})

const text = ref('')
const value = ref(false)

const toggle = () => {
  value.value = !value.value
}
</script>

<style scoped></style>
